<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Companyleft active="joinList"/>
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Companytitle name="应聘者简历 "/>
        <div>
          职位：<el-input size="small" type="text" v-model="search.positionName" style="width: 200px;" placeholder="职位名称"></el-input>
          状态：<el-select size="small" v-model="search.applyState" filterable placeholder="请选择" style="width: 100px;margin-right: 20px;">
            <el-option
              v-for="(item, index) in [{id: 1, label: '初筛'}, {id: 2, label: '感兴趣'}, {id: 3, label: '不感兴趣'}, {id: 4, label: '邀面试'}, {id: 5, label: '待查阅'}, ]"
              :key="index"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
          年龄：<el-select v-model="search.age" placeholder="年龄" size="small" style="width: 100px;">
            <el-option :label="item.label" :key="index" :value="item.value"
                       v-for="(item, index) in agelist"></el-option>
          </el-select>
           <!-- - <el-input size="small" type="number" v-model="search.eAge"  style="width: 80px;margin-right: 20px;" placeholder="最高"></el-input> -->
         经验：<el-select size="small" v-model="search.experience" placeholder="请选择工作经验" style="width: 200px;margin-right: 20px;">
            <el-option
              v-for="item in yearlist"
              :key="item.subTypeName"
              :label="item.subTypeName"
              :value="item.subTypeName">
            </el-option>
          </el-select>
          <br>
          <br>
          日期：<el-date-picker
                v-model="search.createTime"
                size="small"
                style="margin-right: 20px;"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择申请日期">
              </el-date-picker>
          学历：<el-select size="small" style="width: 200px;margin-right: 20px;" v-model="search.educational" filterable placeholder="请选择学历">
            <el-option
              v-for="item in xuelilist"
              :key="item.subTypeName"
              :label="item.subTypeName"
              :value="item.subTypeName">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" style="background:#20a2b2; border: 0; margin-left: 10px; margin-right: 20px;" @click="getpost(1)">搜索</el-button>
          <el-button type="default" size="small"  @click="result">重置条件</el-button>
        </div>
        <br>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="positionName" min-width="100" label="应聘职位"></el-table-column>
          <el-table-column prop="name" label="姓名">
            <template slot-scope="scope" min-width="100px">
              <div style="padding-right: 30px; position: relative;">
              {{scope.row.name}}
              <el-badge style="position: absolute;right: 10px;cursor: pointer;"
                v-if="scope.row.applyState != 5" 
                :value="scope.row.laiYuan > 99 ? '99+' : scope.row.laiYuan" 
                :hidden="!scope.row.laiYuan || scope.row.laiYuan == 0">
                <i v-if="scope.row.status != 5" 
                  @click.stop="showLY(scope.row)"
                  class="el-icon-s-comment" 
                  style="color:#20a2b2;font-weight: 700; margin-left: 5px; font-size:22px;cursor: pointer;"></i>
              </el-badge>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" :formatter="sexFormat" label="性别"></el-table-column>
          <el-table-column prop="educational" label="学历"></el-table-column>
          <el-table-column prop="experience" label="年限"></el-table-column>
          <el-table-column prop="homeAddress" label="现居住地"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span :style="{ color: -1 !== [2,3].indexOf(scope.row.applyState) ? 'red' : 'black'}">{{ stateFormat(scope.row) }}</span>
            </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请日期" width="130"></el-table-column>
          <el-table-column prop="address" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="UpdatePositionApplyState(scope.row, 1)" size="small">查看</el-button>
              <el-button type="text" @click="UpdatePositionApplyState(scope.row, 2)" size="small" v-if="(['1','3','5'].includes(scope.row.applyState))">感兴趣</el-button>
              <el-button type="text" @click="UpdatePositionApplyState(scope.row, 3)"  size="small" v-if="(['1','2','5'].includes(scope.row.applyState))">不感兴趣</el-button>
              <el-button type="text" @click="UpdatePositionApplyState(scope.row, 4)"  size="small" v-if="scope.row.applyState == 2">邀面试</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="text-align: center; padding: 30px 0" v-if="total>0">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="search.currentPage"
            :page-size="search.pageSize"
            @current-change="getpost"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      width="600px"
      :visible.sync="lyVisible"
      @close="onLYClose"
      append-to-body>
      <JwChat v-if="lyVisible" :taleList="chatList" class="chart-box" 
        @enter="bindEnter" 
        v-model="chatInput" 
        :toolConfig="{show:[]}"/>
  </el-dialog>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Companytitle from '../../components/companytitle'
import Upload from '../../components/upload'
import Companyleft from '../../components/companyleft'
import { getAllApplyCVByPage, UpdatePositionApplyState, PositionByEnterpriseId, 
  WorkYearState, EducationState, GetLYHistory, AddLY,ReadLY } from '../../assets/js/domains'
import headImg from '../../assets/img/gerens.png'
import moment from 'moment'

export default {
  name: 'JoinList',
  components: { Companyleft, Upload, Companytitle },
  directives: {},
  data: function () {
    return {
      form: {},
      total: 0,
      positonList: [],
      yearlist: [],
      xuelilist: [],
      agelist: [
        { value: '18-25', label: '18-25' },
        { value: '26-35', label: '26-35' },
        { value: '36-45', label: '36-45' },
        { value: '46-55', label: '46-55' },
        { value: '55-65', label: '55以上' },
        { value: '不限', label: '不限' }
      ],
      search: {
        currentPage: 1,
        pageSize: 20,
        experience: '',
        applyState: '',
        enterpriseUid: '',
        educational: '',
        positionName: '',
        age: '',
        createTime: ''
      },
      tableData: [],
      uplaodstyle: { width: '120px', height: '160px' },
      options: [],
      value: '',

      chatList:[],
      chatInput:'',
      lyVisible: false,
      curRow: null,
      liuyan:{
        pageNum: 0,
        pageSize: 100
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.search.enterpriseUid = localStorage.getItem('md_enterpriseUid')
    this.positionList()
    this.getWorkYearState()
    this.getEducationState()
  },
  computed: {},
  mounted: function () {
    this.tmpSearch = Object.assign({}, this.search)
    this.getpost(1)
  },
  methods: {
    result: function () {
      this.search = Object.assign({}, this.tmpSearch)
      this.getpost(1)
    },
    addform: function () {
      this.$router.push({ path: '/addJob' })
    },
    onSubmit: function () {
    },
    getpost: function (page) {
      const _this = this
      if (page) {
        this.search.currentPage = page
      }
      const params = Object.assign({}, this.search)
      for (const key in params) {
        params[key] = params[key] == '不限' ? '' : params[key]
      }
      params.ageBegin = parseInt(params.age.split('-')[0])
      params.ageEnd = parseInt(params.age.split('-')[1])
      params.ageBegin = isNaN(params.ageBegin) ? '' : params.ageBegin
      params.ageEnd = isNaN(params.ageEnd) ? '' : params.ageEnd
      delete params.age

      getAllApplyCVByPage(params).then(function (res) {
        if (res.code === 200) {
          _this.tableData = res.data.content.filter(item => item.id)
          _this.total = res.data.totalElements
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },

    toCV: function (row) {
      window.open('personResume.html?id=' + row.userUid)
    },
    sexFormat: function (row) {
      return row.sex == 1 ? '男' : '女'
    },
    stateFormat: function (row) {
      if (row.applyState == 1) {
        return '初筛'
      } else if (row.applyState == 2) {
        return '感兴趣'
      } else if (row.applyState == 3) {
        return '不感兴趣'
      } else if (row.applyState == 4) {
        return '邀面试'
      } else if (row.applyState == 5) {
        return '待查阅'
      }
    },
    UpdatePositionApplyState: function (row, state) {
      if (state == 1 && row.applyState != 5) {
        window.open('personResume.html?id=' + row.userUid)
        return
      }

      const _this = this
      UpdatePositionApplyState({ applyPositionId: row.id, applyState: state }).then(function (res) {
        if (res.code == 200) {
          _this.getpost()
          if (row.applyState == 5) {
            window.open('personResume.html?id=' + row.userUid)
          }
        }
      })
    },
    positionList: function () {
      const _this = this
      PositionByEnterpriseId({ pageSize: 100, pageNum: 1, enterprise_uid: this.search.enterpriseUid }).then(function (res) {
        if (res.code === 200) {
          _this.positionList = res.data.content.map(function (item) {
            return {
              id: item.id,
              label: item.positionName
            }
          })
        }
      })
    },
    getWorkYearState: function () {
      const _this = this
      WorkYearState().then(function (res) {
        _this.yearLoading = false
        if (res.code === 200) {
          _this.yearlist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getEducationState: function () {
      const _this = this
      EducationState().then(function (res) {
        _this.xueliLoading = false
        if (res.code === 200) {
          _this.xuelilist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },

    showLY(row){
      this.curRow = row
      let params = {
        qzz_id: row.userUid,
        zpz_user_id: row.enterpriseUid,
        zw_id: row.id,
        pageNum: this.liuyan.pageNum,
        pageSize: this.liuyan.pageSize
      }
      GetLYHistory(params).then(res => {
        this.lyVisible = true
        if(!res || !res.list || !res.list.length){
          return
        }
        this.chatList = res.list.map(item => {
          let isMine = item.lyLb === '招聘者'
          return {
            date: item.lyTime,
            text: { text: item.lyNr },
            mine: isMine,
            name: isMine ? "我" : row.name,
            img: (isMine && row.logo) || headImg
          }
        })
      }).catch(err => {
        console.log(err)
      })

      ReadLY({
        qzz_id: row.userUid,
        zpz_user_id: row.enterpriseUid,
        zw_id: row.id,
        zpz_or_qzz: 'zpz'
      }).then(() => {
        row.laiYuan = ''
      }).catch(()=>{})
    },
    bindEnter(){
      if(!this.chatInput) return
      let text = this.chatInput
      this.validSensWords(null, this.chatInput, valid => {
        if(valid){
          this.$alert(valid)
          return;
        }
        this.addLY(text)
      })
    },
    addLY(text){
      let params = {
        qzz_id: this.curRow.userUid,
        zpz_user_id: this.curRow.enterpriseUid,
        zw_id: this.curRow.id,
        ly_lb: '招聘者',
        sf_hf: '否',
        hf_id: '',
        ly_nr: text
      }
      AddLY(params).then(res => {
        if(res !== 'success'){
          this.$message.error("留言保存失败，请重试")
          return
        }
        this.chatList.push({
          date: moment().format("YYYY-MM-DD HH:mm:ss"),
          text: { text },
          mine: true,
          name: "我",
          img: this.curRow.logo || headImg
        })
      }).catch(err => {
        this.$message.error(err.message || "留言保存失败")
      })
    },
    onLYClose(){
      this.chatList = []
      this.chatInput = ''
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
<style>
.el-badge__content{
  border-bottom-left-radius: 3px;
  border:none;
}
.chart-box .toolsBox{
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
.el-table .cell{overflow: visible;}
</style>